$(function () {
  let layer = layui.layer;
  let form = layui.form;

  // 图片裁剪功能
  // 1.初始化裁剪对象
  const $image = $("#image");
  // 2.配置裁剪选项参数
  const options = {
    // 纵横比（宽高比）
    aspectRatio: 400 / 280,
    // 预览区域
    preview: ".img-preview",
  };
  // 3.初始化裁剪区域
  $image.cropper(options);
  // 初始化富文本编辑器
  initEditor();

  // 获取文章列表并渲染
  initCate();
  function initCate() {
    $.ajax({
      method: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("获取失败");
        }
        // 使用模板引擎渲染页面
        let htmlStr = template("tpl-cate", res);
        $("#cateId").html(htmlStr);

        form.render(); //更新全部
      },
    });
  }

  // 点击选择封面，唤起文件上传框的点击事件
  $("#chooserImage").on("click", function () {
    $("#coverFile").click();
  });

  $("#coverFile").on("change", function (e) {
    //获取 e.target.foles
    let files = e.target.files;
    if (files.length === 0) {
      return console.log("当前没有选择图片");
    }

    // 根据选择的图片，创建url地址
    let imgURL = URL.createObjectURL(files[0]);
    console.log(imgURL);

    // 裁剪区域重新渲染图片
    $image.cropper("destroy").attr("src", imgURL).cropper(options);
  });

  // 定义文章发布的状态，点击草稿后，绑定点击事件，修改文章状态
  //默认状态为  已发布
  let art_state = "已发布";
  // 点击存为操作。切换状态为 草稿
  $("#btnSave").on("click", function () {
    art_state = "草稿";
  });

  $("#formPub").on("submit", function (e) {
    // 1.阻止默认提交行为
    e.preventDefault();
    // 2.创建一个 FormData 对象
    let fd = new FormData($(this)[0]);
    // 3.把当前的状态，添加到 FormData 对象中去
    fd.append("state", art_state);

    // console.log(fd.get("title"));标题
    // console.log(fd.get("cate_id"));分类
    // console.log(fd.get("content"));内容

    // 4.将裁剪后的图片,输出成一个对象
    // 4.1创建一个 canvas画布
    $image
      .cropper("getCroppedCanvas", {
        width: 400,
        heiht: 280,
      })
      .toBlob(function (blob) {
        // 通过 toBlob 方法转为了文件对象，把文件存储到 fd
        fd.append("cover_img", blob);
        publishArt(fd);
      });
  });

  // 定义发布文章的ajax请求
  function publishArt(f) {
    $.ajax({
      method: "POST",
      url: "/my/article/add",
      data: f,
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("发布文章失败！");
        }
        layer.msg("发布文章成功！");
        // 成功后跳转到文章列表页面
        location.href = "./article_list.html";

        // 同添加类名修改当前 dd 的样式
        $(".layui-nav-child dd:nth-child(2)", window.parent.document).addClass("layui-this").siblings().removeClass("layui-this");
      },
    });
  }
});
